<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>滚动监听2</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
            <style>
                  body {
                        position: relative;
                  }

                  ul.nav-pills {
                        top: 20px;
                        position: fixed;
                  }

                  div.col-8 div {
                        height: 600px;
                  }
                  
            </style>
      </head>
      <body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
            <div class="container-fluid">
                  <div class="row">
                        <nav class="col-sm-3 col-4" id="myScrollspy">
                              <ul class="nav nav-pills flex-column">
                                    <li class="nav-item">
                                          <a class="nav-link active" href="#section1">导航一</a>
                                    </li>
                                    <li class="nav-item">
                                          <a class="nav-link active" href="#section2">导航二</a>
                                    </li>
                                    <li class="nav-item">
                                          <a class="nav-link active" href="#section3">导航三</a>
                                    </li>
                                    <li class="nav-item dropdown dropright">
                                          <a class="nav-link dropdwon-toggle" data-toggle="dropdown" href="#">导航四</a>
                                          <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#section4_1">链接一</a>
                                                <a class="dropdown-item" href="#section4_2">链接一</a>
                                          </div>
                                    </li>
                              </ul>
                        </nav>
                        <div class="col-sm-9 col-8">
                              <div id="section1" class="bg-success">
                                    <h1>section1</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                              </div>
                              <div id="section2" class="bg-success">
                                    <h1>Section2</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                              </div>
                              <div id="section3" class="bg-success">
                                    <h1>Section3</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                              </div>
                              <div id="section4_1" class="bg-success">
                                    <h1>Section4_1</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                              </div>
                              <div id="section4_2" class="bg-success">
                                    <h1>Section4_2</h1>
                                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                              </div>
                        </div>
                  </div>
            </div>
            
      </body>
</html>